<template>
  <view class="goodsList-content-item" @tap="handleClick(goods.id)">
    <view class="goods-img">
      <img :src="goods.goodsImgs[0]" />
    </view>
    <view class="goods-content">
      <view class="goods-tag">
          <tn-tag v-for="(item, index) in goods.goodsTags" class="goods-tag-item" font-size="18rpx">{{
            item
          }}</tn-tag>
      </view>
      <view class="goods-brand">{{ goods.brandName }}</view>
      <view class="goods-name">{{ goods.goodsName }}</view>
      <view class="goods-desc tn-color-orangeyellow--dark">{{
        goods.goodsDesc
      }}</view>

      <view class="goods-price"
        ><span>￥</span
        >{{
          goods.goodsPrice ? formatPrice(goods.goodsPrice, 2) : "0.00"
        }}</view
      >
    </view>
  </view>
</template>

<script lang="ts" setup>
import {} from "vue";
import { Goods } from "../types";

import { formatPrice } from "@/tuniao-ui/utils";

import TnLazyLoad from "@/tuniao-ui/components/tn-lazy-load/src/LazyLoad.vue";
import TnTag from "@/tuniao-ui/components/tn-tag/src/Tag.vue";

/** Props */
type Props = {
  goods: Goods;
};

const props = defineProps<Props>();
const emits = defineEmits({
  /** 点击事件 */
  click: (index: string | number) =>
    typeof index === "string" || typeof index === "number",
});
// 处理点击事件
const handleClick = (index: number) => {
  emits("click", index);
};
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true,
  },
};
</script>

<style lang="scss" scoped>
.goodsList-content-item {
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  margin: 20rpx;
  width: 335rpx;
  .goods-img {
    img {
      width: 100%;
    }
  }

  .goods-content {
    padding: 0rpx 20rpx 10rpx 20rpx;
    .goods-tag {
      &-item {
        margin-right: 10rpx;
      }
      &-item:nth-child(even) {
        background-color: rgb(32, 96, 48);
      }
    }
    .goods-brand {
      font-weight: bold;
    }
    .goods-name {
      font-size: 24rpx;
    }

    .goods-desc {
      font-size: 22rpx;
      // color: #CCA220;
    }

    .goods-price {
      font-weight: bold;
      span {
        font-size: 16rpx;
      }
    }
  }
}
</style>
